<style type="text/css">
	div.link-message{
		text-align:center;
	}
	div.link-img{
		position:relative;
		margin-top:3.2rem;
		overflow:hidden;
	}
	i.link-router{
		display:inline-block;
		background:url(/luci-static/images/pic-router_h5.png?_=20170809165512) no-repeat;
		background-size:contain;
		width:7.7rem;
		height:2.3rem;
		margin-left: 0.2rem;
	}
	i.break-icon{
		color:#F13F3F;
		position:absolute;
		left:6.6rem;
		top:0.6rem;
		background-color:#F8F8F8;
		font-size:0.8rem;
	}
	div.router-note{
		margin-bottom:2.5rem;
	}
	div.router-str{
		color: #3f4044;
		display:inline-block;
		font-size:0.35rem;
	}
	div.old-router{
		width:48%;
	}
	div.new-router{
		width:48%;
	}
	p.link-tip{
		width:80%;
		font-size:0.417rem;
	}
	#Start{
		background-color:#FE8F19;
	}
</style>
<script>
(function(){
	<%
		local para = {find_pwd = {link_status = {}}}
		local data = tpl_get_data(para, true)
	-%>
	var result = <%=data%>;
	var currentState = stateman.current.name;

	function initPage(result){
		var errNo = result[ERR_CODE];
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var linkStatus = ret.find_pwd.link_status;
		var link = linkStatus["status"];
		if ("1" == link){
			showLinkState(link, label.connectSuccess);
			$("#Start").show();
		}else{
			showLinkState(link, label.connectTip);
			$("#Start").hide();
		}
	}

	function showLinkState(state, stateStr){
		if (state){
			$("p.note-str").css("color","#FF7800").text(stateStr);
		}else{
			$("p.note-str").css("color","#F34947").text(stateStr);
		}
	}

	var refreshLindStateHd = null;
	function refreshLinkState(){
		var para = {
			find_pwd:{link_status:null}
		};

		apiGet(para, function(data){
			if (currentState != stateman.current.name){
				return;
			}
			initPage(data);

			refreshLindStateHd = $.setTimeout(refreshLinkState, 2000);
		});
	}

	$("#Back").click(function(){
		stateman.go("guideNetworkSet");
	});

	$("#Start").click(function(){
		showLoading(label.findingPppoePwd);
		clearTimeout(refreshLindStateHd);

		var para = {
			find_pwd:{config:null}
		};

		apiGet(para, function(result){
			closeLoading();
			var errNo = result[ERR_CODE];
			if (E_NONE == errNo){
				ret = result[K_MODULE];
			}else{
				console.log(result);
				return;
			}

			var data = ret.find_pwd.config;

			var setValue = {};
			setValue.find_success = data.find_success;
			setValue.user = data.user;
			setValue.password = data.password;
			for (var k in setValue){
				sessionLS.setItem(k, setValue[k]);
			}
			stateman.go("findPppoePwd");
		});
	});

	initPage(result);
	refreshLinkState();
})();
</script>
<div class="head-con">
	<h1 class="head-title">{%label.findPwd%}</h1>
</div>
<div class="set-con below-head link-message">
	<div class="link-img">
		<i class="link-router"></i>
		<i class="break-icon icon_error hidden"></i>
	</div>
	<div class="router-note">
		<div class="router-str old-router">{%label.oldRouterWan%}</div>
		<div class="router-str new-router">{%label.newRouterLan%}</div>
	</div>
	<div class="err-note">
		<p class="note-str link-tip">{%label.connectTip%}</p>
	</div>
	<div class="btn-con">
		<input id="Back" class="btn btn-left" type="button" value="{%btn.back%}"/>
		<input id="Start" class="btn btn-right" type="button" value="{%btn.startFindPwd%}"/>
	</div>
</div>
